<template>
    <el-input
        ref="editableInput"
        v-model="tagData.name"
        maxlength="15"
        style="width: 8.125rem"
        @change="changeInput"
        @keyup.enter="$event.target.blur()"
        @blur="handleInput"></el-input>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const editableInput = ref(null);
const emit = defineEmits(['editedTag', 'loseBlur']);
const props = defineProps(['tag']);
const tagData = ref(props.tag);
const inputFouse = () => {
    editableInput.value?.input?.focus();
};
const handleInput = (val: any) => {
    emit('loseBlur', tagData.value);
};
const changeInput = () => {
    emit('editedTag', tagData.value);
};
defineExpose({ inputFouse });
</script>
